import * as React from 'react'
import { Steps, Modal, Toast } from 'antd-mobile'
import { NavBar, Item, Button, Icon, Input } from 'components'
import './FillInSignature.less'
import { post } from '../../../../utils'

const Step = Steps.Step

export default class FillInSignature extends React.Component<any, any> {

    public steps = [
        {
            title: '绑定身份证',
            icon: require('../../../../assets/signature_idCard.png')
        }, 
        {
            title: '填写签章信息',
            icon: require('../../../../assets/signature_approve.png')
        }, 
        {
            title: '领取恒豆',
            icon: require('../../../../assets/signature_beans.png')            
        },  
    ]

    public state = {
        stepIndex: 1,
        tabsIndex: 1,
        type: '个人签章',
        nowAddress: '',
        typeModal: false,
        systemId: '',
        company_name: '', // 企业名称
        credit_card: '', // 统一社会信用代码
        company_rep: '', // 企业法定代表人
        business_contacts: '', // 业务联系人
        business_contacts_phone: '', // 业务联系人电话
        fdd_customer_code: '', // 法大大客户编码
    }
    public componentDidMount () {
        const { suerSignatureStatus } = this.props
        if (suerSignatureStatus && suerSignatureStatus.status >= 2) {
            this.setState({
                stepIndex: 2,
                tabsIndex: 2
            })
        }
        this.getData()
    }

    public render(): JSX.Element {
        const { stepIndex, type , typeModal, tabsIndex } = this.state
        return (
            <div className="fillInSignature">
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>填写签章信息</div>}
                    fixed={true}
                />
                <div className="fillInSignature_topStep">
                    <img src={require('../../../../assets/signature_bg.png')} />
                    <div className="fillInSignature_topStepContent">
                        <Steps current={stepIndex} direction="horizontal" size="small">
                            {
                                this.steps.map((item: any, index: number) => {
                                    return (
                                        <Step 
                                            className={`${(index !== tabsIndex) ? 'fillInSignature_opacity' : ''}`}
                                            onClick={() => {this.handleClickTabs(index)}}
                                            key={index} 
                                            title={item.title} 
                                            icon={<img className="fillInSignature_topStepContent_img" src={item.icon} />}
                                            description={item.description} 
                                        />
                                    )
                                })
                            }   
                        </Steps>
                    </div>
                </div>
                {
                    this.getTabsContent(tabsIndex)
                }
                <Modal
                    popup={true}
                    visible={typeModal}
                    onClose={() => {this.onClose('typeModal')}}
                    animationType="slide-up"
                >
                    <div className="fillInSignature_modalContent">
                        <div className="fillInSignature_modalContent_top">
                            <Icon type="arrow_left" />
                            选择签章类型
                        </div>
                        <Item 
                            onPress={() => {this.setState({type: '个人签章'}); this.onClose('typeModal')}}
                            className="fillInSignature_modalContent_item" 
                            title={<div className="fillInSignature_modalContent_item_title">个人签章</div>} 
                            value={<div className="fillInSignature_modalContent_item_value">
                                {
                                    (type === '个人签章') 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>}
                        />
                        <Item 
                            onPress={() => {this.setState({type: '企业签章'}); this.onClose('typeModal')}}
                            className="fillInSignature_modalContent_item" 
                            title={<div className="fillInSignature_modalContent_item_title">企业签章</div>} 
                            value={<div className="fillInSignature_modalContent_item_value">
                                {
                                    (type === '企业签章') 
                                    ? <Icon type="tick" />
                                    : null
                                }
                            </div>}
                        />
                    </div>
                </Modal>

            </div>
        )
    }
    private getTabsContent = (tabsIndex: number) => {
        const { userInfo } = this.props 
        switch (tabsIndex) {
            case 0: return (
                <React.Fragment>
                    <Item 
                        className="fillInSignature_item" 
                        title={<div className="fillInSignature_item_title">本人姓名</div>} 
                        value={<div className="fillInSignature_item_value">{userInfo && userInfo.real_name}</div>} 
                    />
                    <Item 
                        className="fillInSignature_item" 
                        title={<div className="fillInSignature_item_title">身份证号</div>}
                        value={<div className="fillInSignature_item_value">{userInfo && userInfo.id_card}</div>} 
                    />
                </React.Fragment>
               
            )
            case 1: return this.getApproveContent()
            case 2: return this.getResultContent()
            default: return null
        }
    }
    private getApproveContent = () => {
        const { type , systemId, nowAddress, company_name, credit_card, company_rep, business_contacts,
         business_contacts_phone, fdd_customer_code } = this.state
        const { userInfo, suerSignatureStatus } = this.props 
        // 没有签章，或者是重新填写 都显示表单信息 ，每次进入页面isAfresh为false，如果有信息则会显示信息详情
        if (!suerSignatureStatus || suerSignatureStatus.isAfresh) {
            return (
                <div> 
                    <Item 
                        onPress={() => {this.showModal('typeModal')}}
                        className="fillInSignature_item" 
                        title={<div className="fillInSignature_item_title">签章类型</div>} 
                        value={<div className="fillInSignature_item_value">{type}<Icon style={{color: '#888888', fontSize: '0.55rem'}} type="arrow_right" /></div>} 
                    />
                    <div>
                        {
                            (type === '个人签章') 
                            ? <React.Fragment>
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">本人姓名</div>} 
                                    value={<div className="fillInSignature_item_value">{userInfo && userInfo.real_name}<Icon type="tick_circle" /></div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">身份证号</div>}
                                    value={<div className="fillInSignature_item_value">{userInfo && userInfo.id_card}<Icon type="tick_circle" /></div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">系统ID</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'systemId')} value={systemId} onChange={this.handleInput.bind(this, 'systemId')} className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">现居住</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'nowAddress')}  value={nowAddress} onChange={this.handleInput.bind(this, 'nowAddress')} className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <div className="fillInSignature_noticeInfo">
                                    <p><Icon type="sigh_circle" />资料一经提交审核，将不能手动修改。修改请<span style={{color: '#fa0000'}}>联系客服</span></p>
                                </div>
                                <div className="fillInSignature_operation">
                                    <Button className="fillInSignature_operation_btn" disabled={this.handleVerify()} onClick={this.handleSubmit}>立即提交</Button>
                                </div>
                            </React.Fragment>
                            : <React.Fragment>
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">本人姓名</div>} 
                                    value={<div className="fillInSignature_item_value">{userInfo && userInfo.real_name}<Icon type="tick_circle" /></div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">企业名称</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'company_name')}  value={company_name} onChange={this.handleInput.bind(this, 'company_name')} className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">统一社会信用代码</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input maxLength={18} type="text"onClose={this.handleClearInput.bind(this, 'credit_card')}  value={credit_card} onChange={this.handleInput.bind(this, 'credit_card')}  className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">企业法定代表人</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'company_rep')}  value={company_rep} onChange={this.handleInput.bind(this, 'company_rep')}  className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">业务联系人</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'business_contacts')}  value={business_contacts} onChange={this.handleInput.bind(this, 'business_contacts')}  className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">业务联系电话</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="tel" maxLength={11} onClose={this.handleClearInput.bind(this, 'business_contacts_phone')}  value={business_contacts_phone} onChange={this.handleInput.bind(this, 'business_contacts_phone')}  className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">企业地址</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'nowAddress')}  value={nowAddress} onChange={this.handleInput.bind(this, 'nowAddress')} className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <Item 
                                    className="fillInSignature_item" 
                                    title={<div className="fillInSignature_item_title">法大大客户编码</div>}
                                    value={<div className="fillInSignature_item_value">
                                        <Input type="text" onClose={this.handleClearInput.bind(this, 'fdd_customer_code')}  value={fdd_customer_code} onChange={this.handleInput.bind(this, 'fdd_customer_code')}  className="fillInSignature_item_value_input" placeholder="必填" />
                                    </div>} 
                                />
                                <div className="fillInSignature_noticeInfo">
                                    <p><Icon type="sigh_circle" />资料一经提交审核，将不能手动修改。修改请<span style={{color: '#fa0000'}}>联系客服</span></p>
                                </div>
                                <div className="fillInSignature_operation">
                                    <Button className="fillInSignature_operation_btn" disabled={this.handleVerify()} onClick={this.handleSubmit}>立即提交</Button>
                                </div>
                            </React.Fragment>
                        }
                    </div>
                </div>
            )
        }
        // 根据签章类型，显示不同内容
        switch (suerSignatureStatus.signature_type) {
            case 1: return this.getPersonalContent()
            case 2: return this.getEnterpriseContent()
            default: return null
        }
        return null
    }
    private getPersonalContent = () => {
        const { suerSignatureStatus } = this.props
        return ( // 审核中
            <React.Fragment>
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">签章类型</div>} 
                    value={<div className="fillInSignature_item_value">{(suerSignatureStatus.signature_type === 1) ? '个人签章' : '企业签章'}</div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">本人姓名</div>} 
                    value={<div className="fillInSignature_item_value">{suerSignatureStatus && suerSignatureStatus.name}<Icon type="tick_circle" /></div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">身份证号</div>}
                    value={<div className="fillInSignature_item_value">{suerSignatureStatus && suerSignatureStatus.id_card}<Icon type="tick_circle" /></div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">系统ID</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.fdd_system_id}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">现居住</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.address}
                    </div>} 
                />
                <div className="fillInSignature_noticeInfo">
                    <p><Icon type="sigh_circle" />资料一经提交审核，将不能手动修改。修改请<span style={{color: '#fa0000'}}>联系客服</span></p>
                </div>
                {
                    this.getSubmitBtn(suerSignatureStatus.status)
                }
            </React.Fragment>
        )
        
    }
    private getEnterpriseContent = () => {
        const { suerSignatureStatus, userInfo } = this.props
        return (
            <React.Fragment>
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">本人姓名</div>} 
                    value={<div className="fillInSignature_item_value">{userInfo && userInfo.real_name}<Icon type="tick_circle" /></div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">企业名称</div>}
                    value={<div className="fillInSignature_item_value">
                    {suerSignatureStatus && suerSignatureStatus.company_name}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">统一社会信用代码</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.credit_card}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">企业法定代表人</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.company_rep}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">业务联系人</div>}
                    value={<div className="fillInSignature_item_value">
                       {suerSignatureStatus && suerSignatureStatus.business_contacts}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">业务联系电话</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.business_contacts_phone}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">企业地址</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.address}
                    </div>} 
                />
                <Item 
                    className="fillInSignature_item" 
                    title={<div className="fillInSignature_item_title">法大大客户编码</div>}
                    value={<div className="fillInSignature_item_value">
                        {suerSignatureStatus && suerSignatureStatus.fdd_customer_code}
                    </div>} 
                />
                <div className="fillInSignature_noticeInfo">
                    <p><Icon type="sigh_circle" />资料一经提交审核，将不能手动修改。修改请<span style={{color: '#fa0000'}}>联系客服</span></p>
                </div>
                {this.getSubmitBtn(suerSignatureStatus.status)}
            </React.Fragment>
        ) // 已审核
        
    }
    private getResultContent = () => {
        const { suerSignatureStatus } = this.props
        switch (suerSignatureStatus.status) {
            case 2: return this.getSuccessContent() // 已审核
            case 3: return this.getFailContent() // 审核失败
            default: return null
        }
    }
    private getSuccessContent = () => {
        return (
            <React.Fragment>
                <div className="fillInSignature_result">
                    <div className="fillInSignature_result_icon">
                        <Icon type="success_circle_noBg" />
                    </div>
                    <div className="fillInSignature_result_textWrap">
                        <p>恭喜您，签章成功</p>
                        <p>您已签章成功，快去领取恒豆吧！</p>
                    </div>
                    <div className="fillInSignature_result_operation">
                        <Button className="fillInSignature_result_operation_btn" onClick={() => {this.goToUrl('/My/receiveHD')}}>领取恒豆</Button>
                    </div>
                </div>
            </React.Fragment>
        )
    }
    private getFailContent = () => {
        return (
            <React.Fragment>
                <div className="fillInSignature_result">
                    <div className="fillInSignature_result_icon">
                        <Icon type="fail_circle_noBg" style={{fontSize: '3.25rem'}} />
                    </div>
                    <div className="fillInSignature_result_textWrap">
                        <p style={{marginTop: '0.3rem'}}>对不起，签章失败</p>
                        <p>如有疑问，请致电<a href="tel:028-8522497">028-8522497</a>咨询。</p>
                    </div>
                    <div className="fillInSignature_result_operation">
                        <Button className="fillInSignature_result_operation_btn" onClick={this.handleAfreshSubmit}>重新签章</Button>
                    </div>
                </div>
            </React.Fragment>
        )
    }
    private getSubmitBtn = (status: any) => {
        switch (status) {
            case 1: return (
                <div className="fillInSignature_operation">
                    <Button className="fillInSignature_operation_btn" disabled={true} onClick={this.handleSubmit}>审核中</Button>
                </div>
            )
            case 2: return (
                null
            )
            case 3: return (
                null
            )
            default: return (
                <div className="fillInSignature_operation">
                    <Button className="fillInSignature_operation_btn" onClick={this.handleSubmit}>立即提交</Button>
                </div>
            )
        }
    }

    private getData = () => {
        const { userInfo, SET_MYUTILS_SIGNATURESTUTS } = this.props
        post('usersapi/userSignatureIs', {
            userId: userInfo.id
        }).then((data: any) => {
            if (data.length !== 0) {
                // 设置重新填写的标识为 false
                data.isAfresh = false
                SET_MYUTILS_SIGNATURESTUTS(data)
                if (data.status >= 2) {
                    this.setState({
                        stepIndex: 2,
                        tabsIndex: 2,
                    })
                }
            }
            
        })
    }
    private handleSubmit = () => {
        const { userInfo, suerSignatureStatus } = this.props
        const { systemId, nowAddress, company_name, credit_card, company_rep, business_contacts,
            business_contacts_phone, fdd_customer_code } = this.state
        let params: any
        if (this.state.type === '个人签章') {
            params = {
                userId: userInfo.id,
                type: 1,
                signature_type: 1,
                name: userInfo.real_name,
                id_card: userInfo.id_card,
                fdd_system_id: systemId,
                address: nowAddress,
                phone: userInfo.phone
            }
        }
        if (this.state.type === '企业签章') {
            params = {
                userId: userInfo.id,
                type: 1,
                signature_type: 2,
                company_name: company_name,
                credit_card: credit_card,
                company_rep:  company_rep,
                business_contacts:  business_contacts,
                business_contacts_phone: business_contacts_phone,
                fdd_customer_code: fdd_customer_code,
                address: nowAddress
            }
        }
        // 如果是重新提交，加入数据id
        if (suerSignatureStatus && suerSignatureStatus.isAfresh) {
            params.id = suerSignatureStatus.id
        }
        post('usersapi/userSignatureAdd', params).then((data: any) => {
            Toast.info('提交成功！', 2)
            setTimeout(() => {this.getData()} , 2000)
        })
    }
    // 重新填写签章信息
    private handleAfreshSubmit = () => {
        const { SET_MYUTILS_SIGNATURESTUTS, suerSignatureStatus } = this.props
        // 设置重新填写的标识为true
        suerSignatureStatus.isAfresh = true
        SET_MYUTILS_SIGNATURESTUTS(suerSignatureStatus)
        this.setState({
            stepIndex: 1,
            tabsIndex: 1,
        })
    }
    private handleVerify = () => {
        const { systemId, nowAddress, company_name, credit_card, company_rep, business_contacts,
            business_contacts_phone, fdd_customer_code, type } = this.state
        if (type === '个人签章') {
            if (systemId.length === 0 || nowAddress.length === 0) {
                return true
            }
            return false
        }
        if (type === '企业签章') {
            if (company_name.length === 0 || credit_card.length === 0 || company_rep.length === 0 || business_contacts.length === 0 || business_contacts_phone.length === 0 || fdd_customer_code.length === 0) {
                return true
            }
            return false
        }
        return false
    }
    private handleClickTabs = (index: any) => {
        const { suerSignatureStatus } = this.props
        // 重新填写时，禁止跳转
        if ((suerSignatureStatus.isAfresh && index === 2) 
        || (suerSignatureStatus.status === 1 && index === 2)) {
            return
        }
        this.setState({
            tabsIndex: index
        })
    }
    private handleInput = (key: string, e: any) => {
        let val = e.target.value
        this.setState({
            [key]: val
        })
    }
    private handleClearInput = (key: string) => {
        this.setState({
            [key]: ''
        })
    }
    private goToUrl = (url: string = '/') => {
        this.props.history.push(url)
    }
    private showModal = (key: any) => {
        this.setState({
            [key]: true,
        })
     }
    private onClose = (key: string) => {
        this.setState({
          [key]: false,
        })
      }
}